<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>添加宠物</title>
      <link rel="stylesheet" href="../css/reset.css">
      <link rel="stylesheet" href="../css/index.css">
      <link rel="stylesheet" href="../layer/mobile/need/layer.css">
      <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
      <style type="text/css">
         #add {
            height: 100vh;
            display: flex;
         }

         .el-aside {
            background-color: #607092;
            overflow: scroll;
         }

         .el-aside::-webkit-scrollbar {
            width: 0 !important
         }

         .addImg {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
            padding: 5px;
         }

         .addImg_item {
            width: 100px;
            margin-bottom: 10px;
            height: 100px;
            box-sizing: border-box;
            cursor: pointer;
         }

         .addImg_item img {
            width: 100%;
            border-radius: 50% 50% 0 50%;
         }

         .cont {
            height: 100%;
            position: relative;
            display: flex;
            flex-direction: column;
         }

         .cont_info {
            flex: 1;
            width: 100%;
         }

         ._info_box {
            display: flex;
         }

         ._info_image {
            width: 100px;
            height: 100px;
            border-radius: 4px;
            overflow: hidden;
         }

         ._info_image img {
            width: 100%;
            height: 100%;
            border-radius: 4px;
         }

         ._info_name_box {
            margin-left: 20px;
         }

         ._info_name {
            width: 100%;
            display: flex;
            align-items: center;
            padding: 5px 0;
            font-size: 16px;
         }

         ._info_name span {
            display: inline-block;
            width: 80px;
         }

         .cont_aptitude {
            margin-top: 20px;
         }

         ._aptitude_title {
            font-size: 20px;
            color: #000000;
         }

         ._aptitude_list {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            flex-wrap: wrap;
            margin: 10px 0;
         }

         ._aptitude_list ._list_item {
            width: 50%;
            padding: 10px 0;
         }

         ._skill_list {
            display: flex;
            margin-top: 10px;
         }

         ._skill_list ._list_item {
            width: 60px;
            height: 60px;
            background-color: #f5f5f5;
            border-radius: 50%;
            margin: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
         }

         ._skill_list ._list_item i {
            font-size: 64px;
         }

         .cont_btn {
            height: 50px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
         }
      </style>
   </head>
   <body>
      <div id="add" class="hide">
         <el-container >
            <el-aside width="210px">
               <div class="addImg">
                  <div class="addImg_item" v-for="(item,index) in pets" :key="index" @click="checkImg(item)">
                     <img :src="'.' + item.src" alt="">
                  </div>
               </div>
            </el-aside>
            <el-container>
               <el-main>
                  <div class="cont" v-if="infoData.name">
                     <div class="cont_info">
                        <el-card class="box-card">
                           <div class="_info_box">
                              <div class="_info_image">
                                 <img :src="'.' +infoData.src" alt="图片">
                              </div>
                              <div class="_info_name_box">
                                 <div class="_info_name" v-cloak>
                                    名称：{{infoData.name}}
                                 </div>
                                 <div class="_info_name">
                                    <span>等级：</span>
                                    <el-input size="small" v-model="grade" placeholder="等级"></el-input>
                                 </div>
                                 <div class="_info_name">
                                    <span>命名：</span>
                                    <el-input size="small" v-model="input" placeholder="命名"></el-input>
                                 </div>
                              </div>
                           </div>
                           <el-divider></el-divider>
                           <div class="cont_aptitude">
                              <div class="_aptitude_title">资质面板</div>
                              <div class="_aptitude_list">
                                 <div class="_list_item" v-cloak>
                                    物攻：{{infoData.wg}}
                                 </div>
                                 <div class="_list_item" v-cloak>
                                    物防：{{infoData.wf}}
                                 </div>
                                 <div class="_list_item" v-cloak>
                                    生命：{{infoData.sm}}
                                 </div>
                                 <div class="_list_item" v-cloak>
                                    灵力：{{infoData.ll}}
                                 </div>
                                 <div class="_list_item" v-cloak>
                                    速度：{{infoData.sd}}
                                 </div>
                                 <div class="_list_item" v-cloak>
                                    成长：{{infoData.cz}}
                                 </div>
                              </div>
                           </div>
                           <div class="cont_skill">
                              <div class="_aptitude_title">技能</div>
                              <div class="_skill_list">
                                 <div class="_list_item" v-for="(item,index) in infoData.skill">
                                    <i class="el-icon-question"></i>
                                 </div>
                              </div>
                           </div>
                        </el-card>
                     </div>
                     <div class="cont_btn">
                        <el-button type="primary" @click="addFun">添加宠物</el-button>
                     </div>
                  </div>
                  <div class="cont_none" v-else>
                     <el-empty description="请选择宠物"></el-empty>
                  </div>
               </el-main>
            </el-container>
         </el-container>
      </div>
   </body>
   <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
   <script src="../js/vue.min.js"></script>
   <script src="../layer/layer.js"></script>
   <script src="https://unpkg.com/element-ui/lib/index.js"></script>
   <script src="../js/pets.json" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript">
      console.log(pets)
      
      var app = new Vue({
         el: "#add",
         data: {
            pets: pets,
            infoData: {},
            input: '',
            grade: 1,
            loading:true
         },
         methods: {
            checkImg(item) {
               this.infoData = item;
               this.input = item.name;
            },
            addFun() {
               console.log(this.infoData);
               let versions =  getUrlParms('versions');
               console.log(versions);
               var params = {
                  versions:versions,
                  name: this.infoData.name,
                  rename: this.input,
                  grade: this.grade,
                  image: this.infoData.src,
                  variation: 1,
                  skill: this.infoData.skill,
                  wg: this.infoData.wg,
                  wf: this.infoData.wf,
                  sm: this.infoData.sm,
                  ll: this.infoData.ll,
                  sd: this.infoData.sd,
                  cz: this.infoData.cz,
                  ti: 42,
                  ling: 42,
                  li: 52,
                  nai: 42,
                  min: 42,
                  pierce: 0,
                  isWl:0, //物连几率
                  critWb: 2, //物理暴击几率
                  critFb: 2, //法术暴击几率
                  elude:0, 
                  wc: 0, //物穿
                  sdUp: 0, //速度提升百分百
                  smUp: 0, //生命提升百分百
                  adUp:0, //物理伤害提升
                  apUp:0, //法术伤害提升
                  fqUp: 0, //法强提升
                  leech: 0,
                  realm: 0, //境界
                  etc_sh: 0, //攻修
                  etc_wf:0, //物防修
                  etc_ff:0, //法防修
                  huo_element: this.infoData.huo_element,
                  bing_element: this.infoData.bing_element,
                  dian_element: this.infoData.dian_element,
                  du_element: this.infoData.du_element,
                  shui_element: this.infoData.shui_element,
                  skills: [],
                  by_sm:0,
                  by_wg:0,
                  by_fs:0,
                  by_wf:0,
                  by_ff:0,
                  by_sd:0,
                  isFl:0, //是否法连
                  skillAttr:'', //技能属性
                  skillname:'', //技能名字
                  isSj:0, //是否有震荡
                  sjMin:0, //震荡最小值
                  sjMax:0, //震荡最大值
                  fc:0, //法穿
                  sx:0, //嗜血百分百
                  reborn:0, //重生概率
                  adImmune:0, //物理免疫
                  apImmune:0, //法强免疫
                  isBlock:0, //是否有格挡,格挡概率
                  holyPressure:0, //是否神罚、伤害比例
                  exclusive:'', //专属技能名字
               }
               let tableData = localStorage.getItem('tableData') ? JSON.parse(localStorage.getItem('tableData')) :
                  [];
               tableData.push(params);
               localStorage.setItem('tableData', JSON.stringify(tableData));
               this.$message({
                  type: 'success',
                  message: '添加成功!'
               });
               parent.app.tableData.push(params);
               console.log(parent.app.tableData);
            }
         },
         mounted() {
            document.querySelector('#add').classList.remove('hide');
            // setTimeout(()=>{
            //    this.loading = false;
            // },1000)
         }
      })
      function getUrlParms(name) {
         var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
         var r = window.location.search.substr(1).match(reg);
         if (r != null)
            return unescape(r[2]);
         return null;
      }
   </script>
</html>
